<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./libs/swiper-bundle.min.css">
    <script src="./libs/require.min.js" data-main="js/index.js"></script>
</head>
<body>
    <header>
        <div class="top">
            <div class="logo">
                <a href="#/">
                    <img src="./images/2.png" alt="logo">
                    <div class="right">
                        <h3>熊猫优选</h3>
                        <span>XIONG MAO YOU XUAN</span>
                    </div>
                </a>
            </div>
            <div class="search">
                <form action="">
                    <span></span>
                    <input type="text" placeholder="搜索商品，发现更多优惠" class="info">
                    <button class="searchBtn">搜索</button>
                </form>
            </div>
            <div class="top-right">
                <ul>
                    <li>
                        <img src="./images/3.png" alt="logo">
                        <span>全程包邮</span>
                    </li>
                    <li>
                        <img src="./images/4.png" alt="">
                        <span>7天退换</span>
                    </li>
                    <li>
                        <img src="./images/5.png" alt="">
                        <span>品质保证</span>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <nav>
        <div class="navigation">
            <ul class="text-nav">
                <li style="background-color: #fee44e;" class="text-nav-li"><a href="#" style=" color: #43240c;">首页</a></li>
                <li class="text-nav-li"><a href="#">9.9包邮</a></li>
                <li class="text-nav-li"><a href="#">超值大额卷</a></li>
                <li class="text-nav-li"><a href="#">早新人气上新</a></li>
                <a href="http://localhost:9527/html/shoppingCar.html">
                <div class="cart">
                    购物车( <span class="cart-num"> 0 </span> )
                </div>
            </a>
            </ul>
            
        </div>
    </nav>
    <div class="main-container">
        <main style="display: block;"> 
            <div class="itemize">
                <ul class="content">
                    <li class="item-lis"><img src="./images/1.1.png" alt=""><a href="#">女装</a><a
                            href="#">/女鞋</a></li>
                    <li class="item-lis"><img src="./images/1.2.png" alt=""><a href="#">男装</a><a
                            href="#">/男鞋</a></li>
                    <li class="item-lis"><img src="./images/1.3.png" alt=""><a href="#">美妆</a><a
                            href="#">/个护</a></li>
                    <li class="item-lis"><img src="./images/1.4.png" alt=""><a href="#">配饰</a><a
                            href="#">/箱包</a></li>
                    <li class="item-lis"><img src="./images/1.5.png" alt=""><a href="#">零食王国</a></li>
                    <li class="item-lis"><img src="./images/1.6.png" alt=""><a href="#">母婴用品</a></li>
                    <li class="item-lis"><img src="./images/1.7.png" alt=""><a href="#">手机</a><a
                            href="#">/数码</a></li>
                    <li class="item-lis"><img src="./images/1.8.png" alt=""><a href="#">内衣袜子</a></li>
                    <li class="item-lis"><img src="./images/1.9.png" alt=""><a href="#">文娱</a><a
                            href="#">/家居</a></li>
                </ul>
                <div class="right-content" style="display: none;">
                    <div>
                        <h3>女装</h3>
                        <ul class="small-list">
                            <li><a href="#">本周上新</a></li>
                            <li><a href="#">背心吊带</a></li>
                            <li><a href="#">韩系少女</a></li>
                            <li><a href="#">衬衫</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">外套</a></li>
                            <li><a href="#">连衣裙</a></li>
                            <li><a href="#">半身裙</a></li>
                            <li><a href="#">裤装</a></li>
                        </ul>
                        <h3>女鞋</h3>
                        <ul class="small-list">
                            <li><a href="#">帆布鞋</a></li>
                            <li><a href="#">高跟鞋</a></li>
                            <li><a href="#">皮鞋</a></li>
                            <li><a href="#">单鞋</a></li>
                            <li><a href="#">小白鞋</a></li>
                            <li><a href="#">外套</a></li>
                            <li><a href="#">运动鞋</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>男装</h3>
                        <ul class="small-list">
                            <li><a href="#">本周上新</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">短裤</a></li>
                            <li><a href="#">衬衫</a></li>
                            <li><a href="#">休闲裤</a></li>
                            <li><a href="#">牛仔裤</a></li>
                        </ul>
                        <h3>男鞋</h3>
                        <ul class="small-list">
                            <li><a href="#">19.9专区</a></li>
                            <li><a href="#">品牌专区</a></li>
                            <li><a href="#">运动鞋</a></li>
                            <li><a href="#">帆布鞋</a></li>
                            <li><a href="#">豆豆鞋</a></li>
                            <li><a href="#">板鞋</a></li>
                            <li><a href="#">篮球鞋</a></li>
                            <li><a href="#">小白鞋</a></li>
                            <li><a href="#">皮鞋</a></li>
                            <li><a href="#">拖鞋</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>美妆</h3>
                        <ul class="small-list">
                            <li><a href="#">防嗮</a></li>
                            <li><a href="#">面膜</a></li>
                            <li><a href="#">口红唇釉</a></li>
                            <li><a href="#">护肤套装</a></li>
                            <li><a href="#">基础护肤</a></li>
                            <li><a href="#">洁面卸妆</a></li>
                            <li><a href="#">底妆腮红</a></li>
                            <li><a href="#">眼妆眉笔</a></li>
                            <li><a href="#">香水</a></li>
                            <li><a href="#">美妆工具</a></li>
                            <li><a href="#">学生党必备</a></li>
                        </ul>
                        <h3>个护</h3>
                        <ul class="small-list">
                            <li><a href="#">洗发美发</a></li>
                            <li><a href="#">身体护理</a></li>
                            <li><a href="#">超值套装</a></li>
                            <li><a href="#">口腔护理</a></li>
                            <li><a href="#">美容美体</a></li>
                            <li><a href="#">洗护工具</a></li>
                            <li><a href="#">香体女孩</a></li>
                            <li><a href="#">热卖榜</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>箱饰</h3>
                        <ul class="small-list">
                            <li><a href="#">全网爆款</a></li>
                            <li><a href="#">夏日限定</a></li>
                            <li><a href="#">耳饰</a></li>
                            <li><a href="#">发饰</a></li>
                            <li><a href="#">项链手链</a></li>
                            <li><a href="#">帽子</a></li>
                            <li><a href="#">戒指</a></li>
                            <li><a href="#">手表腰带</a></a></li>
                        </ul>
                        <h3>箱包</h3>
                        <ul class="small-list">
                            <li><a href="#">腋下包</a></li>
                            <li><a href="#">童趣迷你包</a></li>
                            <li><a href="#">日韩包包</a></li>
                            <li><a href="#">链条包</a></li>
                            <li><a href="#">双肩包</a></li>
                            <li><a href="#">帆布包</a></li>
                            <li><a href="#">胸包</a></li>
                            <li><a href="#">行李箱</a></li>
                            <li><a href="#">钱包卡包</a></li>
                            <li><a href="#">化妆包</a></li>
                            <li><a href="#">文具袋</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>零食王国</h3>
                        <ul class="small-list">
                            <li><a href="#">9.9美食</a></li>
                            <li><a href="#">肥宅快乐套餐</a></li>
                            <li><a href="#">快速早餐</a></li>
                            <li><a href="#">无辣不欢</a></li>
                            <li><a href="#">嗜甜成瘾</a></li>
                            <li><a href="#">膨化食品</a></li>
                            <li><a href="#">坚果干果</a></li>
                            <li><a href="#">四季饮品</a></li>
                            <li><a href="#">减肥瘦身</a></li>
                            <li><a href="#">零食大礼包</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>母婴用品</h3>
                        <ul class="small-list">
                            <li><a href="#">孕妇用品</a></li>
                            <li><a href="#">夏季童装</a></li>
                            <li><a href="#">儿童玩具</a></li>
                            <li><a href="#">孕妇护肤</a></li>
                            <li><a href="#">奶瓶奶嘴</a></li>
                            <li><a href="#">母婴食品</a></li>
                            <li><a href="#">尿布湿巾</a></li>
                            <li><a href="#">童鞋</a></li>
                            <li><a href="#">宝宝用品</a></li>
                            <li><a href="#">孕妇装</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>手机</h3>
                        <ul class="small-list">
                            <li><a href="#">手机</a></li>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">手机壳</a></li>
                            <li><a href="#">移动电源</a></li>
                            <li><a href="#">数据线</a></li>
                            <li><a href="#">手机膜</a></li>
                            <li><a href="#">游戏周边</a></li>
                        </ul>
                        <h3>数码</h3>
                        <ul class="small-list">
                            <li><a href="#">手机</a></li>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">数据线</a></li>
                            <li><a href="#">壳膜支架</a></li>
                            <li><a href="#">移动电源</a></li>
                            <li><a href="#">电脑配件</a></li>
                            <li><a href="#">影音娱乐</a></li>
                            <li><a href="#">生活家电</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>内衣袜子</h3>
                        <ul class="small-list">
                            <li><a href="#">睡衣</a></li>
                            <li><a href="#">打底裤袜</a></li>
                            <li><a href="#">文胸</a></li>
                            <li><a href="#">女士内裤</a></li>
                            <li><a href="#">袜子</a></li>
                            <li><a href="#">男士内裤</a></li>
                        </ul>
                    </div>
                    <div style="display: none;">
                        <h3>文娱</h3>
                        <ul class="small-list">
                            <li><a href="#">青春励志</a></li>
                            <li><a href="#">礼物清淡</a></li>
                            <li><a href="#">文具控</a></li>
                            <li><a href="#">学霸书单</a></li>
                            <li><a href="#">减肥健身</a></li>
                            <li><a href="#">二次元周边</a></li>
                            <li><a href="#">解压文具</a></li>
                        </ul>
                        <h3>家居</h3>
                        <ul class="small-list">
                            <li><a href="#">好价网红款</a></li>
                            <li><a href="#">清洁用品</a></li>
                            <li><a href="#">收纳用品</a></li>
                            <li><a href="#">床上用品</a></li>
                            <li><a href="#">厨具/餐具</a></li>
                            <li><a href="#">家居装饰</a></li>
                            <li><a href="#">纸品湿巾</a></li>
                            <li><a href="#">雨伞语句</a></li>
                            <li><a href="#">萌宠用品</a></li>
                            <li><a href="#">水杯</a></li>
                            <li><a href="#">宿舍神奇</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="autoplay">
                <!-- 轮播图 -->
                <div class="shop_banner swiper-container">
                    <ul class="swiper-wrapper">
                    </ul>
                    <div class="swiper-pagination"></div>
                    <div class="shop_banner_change">
                        <a href="" class="swiper-button-prev"><i></i></a>
                        <a href="" class="swiper-button-next"><i></i></a>
                    </div>
                </div>
                <script type="text/html" id="slide-template">
                    {{each slides slide}}
                    <li class="swiper-slide"><img src="{{slide.imageUrl}}" alt=""></li>
                    {{/each}}
                </script>
                <div class="notice">
                    <h3>9块9包邮</h3>
                    <div class="tips">保证你不吃亏<span></span></div>
                    <img src="./images/1.gif" alt="" srcset="">
                </div>
            </div>
            <ul class="shop-play">
                <a href="#" style="width: 270px;">
                    <li>
                        <h3>早秋人气上心</h3>
                        <p>速来抢购~</p>
                        <span>Go</span>
                        <img src="./images/7.png" alt="" srcset="">
                    </li>
                </a>
                <a href="#" style="background: linear-gradient(270deg,#fffffe,#fec07e); width: 270px;">
                    <li>
                        <h3>超值大额券</h3>
                        <p>优惠直击底价</p>
                        <span>Go</span>
                        <img src="./images/8.png" alt="">
                    </li>
                </a>
                <a href="#" style="background:linear-gradient(270deg,#e7f5ff,#afdcff)">
                    <li>
                        <h3>扫码下载App</h3>
                        <p>发现更多惊喜</p>
                        <span> &nbsp;&nbsp;</span>
                        <div>
                        <img src="./images/9.png" alt="" srcset="">
                    </div>
                    </li>
                </a>

            </ul>
            <div class="nav-title">
                <h3>小编精选</h3>
                <p>每天更新</p>
            </div>
            <!-- 渲染编辑模板 -->
            <script type="text/html" id="goods-template">
            {{each products prod}}
            <li class="goods-list">
                <div class="goods">
                    <div class="show">
                        <a href="./html/details.html?id={{prod.id}}" class="obj_img">
                        <img src="{{prod.image}}">
                    </div>
                    <div class="information">
                        <div class="goods-title">{{prod.title}}</div>
                        <div class="good-keywords">
                            {{if prod.platform === 1}}
                            <span class="keyword-tmall">天猫</span>
                            <span class="keywords">{{prod.keywords[0]}}</span>
                            <span class="keyword-postage">包邮</span>
                            {{else}}
                            <span class="keyword-tmall">淘宝</span>
                            {{if !prod.keywords}}
                            <span class="keywords">{{prod.keywords[0]}}</span>
                            {{/if}}
                            <span class="keyword-postage">包邮</span>
                            {{/if}}
                        </div>
                        <div class="goods-foot">
                            <div class="left">
                                <span class="price">
                                    <span class="price-tag">￥</span>
                                    {{if prod.price.toString().indexOf(".")>0}} 
                                    <span class="price-strong">{{prod.price.toString().slice(0,prod.price.toString().indexOf("."))}}</span>
                                    <span class="digit">{{prod.price.toString().slice(prod.price.toString().indexOf("."),prod.price.toString().length)}}</span>
                                    {{else}}
                                    <span class="price-strong">{{prod.price}}</span>
                                    {{/if}}
                                </span>
                                <span class="sale-num">{{prod.saleNum}}人已买</span>
                            </div>
                            <span class="coupon-value">{{prod.couponValue}}</span>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
            </script>
            <section>
                <ul class="shopping">
                </ul>
                <div class="choice-more">
                    <div class="choice-moreBtn">
                        查看更多
                    </div>
                </div>   
            </section>
        </main>
        <main style="display: none;">
            <section class="section-banner">
                <div class="banner">
                    <div class="banner-title">
                        9块9专区
                    </div>
                </div>
                <div class="banner-nav">
                    <div class="tab">
                        <div class="sub">
                            <ul class="banner-lis">
                                <li class="active">精选</li>
                                <li>美妆护肤</li>
                                <li>服饰配饰</li>
                                <li>手机数码</li>
                                <li>日用家居</li>
                                <li>文娱体育</li>
                                <li>食品</li>
                                <li>个人护理</li>
                            </ul>
                        </div>
                    </div>
                </div> 
                <ul></ul>
                <div class="choice-more">
                    <div class="choice-moreBtn">
                        查看更多
                    </div>
                </div>
            </section>
        </main>
        <main style="display: none;">
            <section class="section-banner">
                <div class="banner">
                    <div class="banner-title">
                        超值大额卷
                    </div>
                </div>
                <div class="banner-nav">
                    <div class="tab">
                        <div class="sub">
                            <ul class="banner-lis">
                                <li class="active">精选女</li>
                                <li>美妆护肤</li>
                                <li>小家电</li>
                                <li>箱包</li>
                                <li>日用家居</li>
                                <li>服装配饰</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul></ul>
                <div class="choice-more">
                    <div class="choice-moreBtn">
                        查看更多
                    </div>
                </div>   
            </section>
        </main>
        <main style="display: none;">
            <section class="section-banner">
                <div class="banner">
                    <div class="banner-title">
                      人气女装上新
                    </div>
                </div>
                <ul></ul>
                <div class="choice-more">
                    <div class="choice-moreBtn">
                        查看更多
                    </div>
                </div>
            </section>
        </main>
        <main style="display: none;">
            <section class="section-banner">
                <div class="banner-nav">
                    <div class="tab">
                        <div class="sub">
                            <ul class="banner-lis">
                                <li class="active">综合</li>
                                <li>价格最低</li>
                                <li>销量最高</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul></ul>
                <div class="choice-more">
                    <div class="choice-moreBtn">
                        查看更多
                    </div>
                </div>
            </section>
        </main>
    </div>
    <footer>
        <div class="foot">
            <div class="foot-contain">
                <img src="./images/2.png" alt="">
                <div class="center">
                    <h1 class="foot-title">熊猫优选</h1>
                    <p class="slogan">年轻人网购首选<br>购物领券更省钱</p>
                </div>
            </div>
            <div class="about-us">
                <p class="items">
                    <span class="line">|</span>
                    <a href="#" class="item">下载APP</a>
                </p>
            </div>
            <div class="footer-bottom">
                <img src="./images/policeIcon.png" alt="" srcset="">
                <p class="msg">
                    <span>浙公安网备案 33010602009949号 | </span>
                ICP备案号:
                <a href="#">浙ICP备17012864号-1</a> 
                </p>
                <img src="./images/license.png" alt="" srcset="">
                <p class="msg">
                    <a href="#">证照信息</a>
                </p>
            </div>
        </div>
    </footer>
    <div class="footer-down">
        <img src="./images/aqkx_83x30.png" alt="" srcset="">
    </div>
</body>

</html>